$(function () {
  $.ajax({
    url: "http://localhost:3000/api/getbaicaijiatitle",
    success: function (res) {
      $('.bcj-header ul').html(template('tmp', res));
      renderUl();
    }
  });

  //封装渲染ul宽度的函数
  function renderUl() {
    $arrLi = $('.bcj-header ul li');
    let ulWidth = 0;
    for (let i = 0; i < $arrLi.length; i++) {
      ulWidth += $arrLi.eq(i).outerWidth(true) + 1;
    }
    ulWidth = ulWidth * 750 / $(window).width() / 50;
    // console.log(ulWidth);
    $('.bcj-header ul').css('width', ulWidth + 'rem');
  }

  $(window).resize(function () { 
    renderUl();
  });

  //点击导航头部渲染内容
  let titleid = 0

  function render(titleid) {
    $.ajax({
      url: "http://localhost:3000/api/getbaicaijiaproduct",
      data: { titleid: titleid },
      success: function (res) {
        $('.bcj-content ul').html(template('tmp2', res));
      }
    });
  }

  render(titleid)

  $('.bcj-header ul').on('click', 'li', function () {
    titleid = $(this).data('id');
    render(titleid)
  })
})